<template>
  <div class="app-container over-scroll">
    <el-row :gutter="20" class="mb20">
      <el-col :span="4"><el-input v-model="req.memberCode_" type="text" clearable placeholder="请输入工号" @change="search"></el-input></el-col>
      <el-col :span="4"><el-input v-model="req._memberName_" type="text" clearable placeholder="请输入姓名" @change="search"></el-input></el-col>
      <el-col :span="4">
        <SelectGroup v-model="req.groupPath_" :clearable="true" @change="search"></SelectGroup>
      </el-col>
      <el-col :span="3">
        <el-select v-model="req.clockInStatus" clearable placeholder="上班打卡结果" @change="search">
          <el-option v-for="item in checkOptions1" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select v-model="req.clockOutStatus" clearable placeholder="下班打卡结果" @change="search">
          <el-option v-for="item in checkOptions2" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button type="warning" icon="el-icon-download" @click="downloadTemp">下载考勤表</el-button>
      </el-col>
    </el-row>
    <el-table :data="list" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip>
        <template slot-scope="{ $index }">
          {{ $index + 1 + (req.page - 1) * req.pageSize }}
        </template>
      </el-table-column>
      <el-table-column prop="memberCode" label="工号" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="memberName" label="姓名" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="groupName" label="部门" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="teamName" label="考勤组" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="day" label="日期" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="day" label="考勤时段" min-width="120" align="left" show-overflow-tooltip>
        <template slot-scope="{row}">
          {{parseTime(row.timeStart, '{h}:{i}:{s}')}}-{{parseTime(row.timeEnd, '{h}:{i}:{s}')}}
        </template>
      </el-table-column>
      <el-table-column prop="punchTimeOriginal" label="上班打卡" min-width="220" align="left" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <div>原记录：{{ row.clockInTimeOriginal }}</div>
          <div>修改后：{{ row.clockInTime || '--' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="punchInOriginal" label="上班打卡结果" align="left" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span>{{ getResult(row.clockInStatus, 'shangban') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="clockOutTime" label="下班打卡" min-width="220" align="left" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <div>原记录：{{ row.clockOutTimeOriginal }}</div>
          <div>修改后：{{ row.clockOutTime || '--' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="clockInOriginal" label="下班打卡结果" align="left" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span>{{ getResult(row.clockOutStatus, 'xiaban') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="workTime" label="工作时长(小时)" align="left" show-overflow-tooltip>
        <template slot-scope="{row}">
            {{minutesToHours(row.workTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="clockInLateMinute" label="迟到时长(分钟)" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="clockOutEarlyMinute" label="早退时长(分钟)" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button @click="edit(row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="total" :total="total" :page.sync="req.page" :limit.sync="req.pageSize" @pagination="getList"></Pagination>

    <Edit :show.sync="show" :item="current" @confirm="onConfirm"></Edit>
  </div>
</template>

<script>
import Edit from "./components/edit.vue";
import { getCheckRecord } from "@/api/checkData";
export default {
  components: {
    Edit,
  },
  data() {
    return {
      list: [],
      total: 0,
      req: {
        _memberName_: null,
        groupId: null,
        time: null,
        page: 1,
        pageSize: 20,
      },
      show: false,
      current: {},
      checkOptions1: [
        {
          label: "待打卡",
          value: 0,
        },
        {
          label: "正常打卡",
          value: 1,
        },
        {
          label: "迟到打卡",
          value: 2,
        },
        // {label: '非工作日打卡',value: 3},
        // {label: '请假',value: 4},
        {
          label: "缺卡",
          value: -1,
        },
        {
          label: "外勤",
          value: 7,
        },
      ],
      checkOptions2: [
        {
          label: "待打卡",
          value: 0,
        },
        {
          label: "正常打卡",
          value: 1,
        },
        {
          label: "早退打卡",
          value: 2,
        },
        // {label: '非工作日打卡',value: 3},
        // {label: '请假',value: 4},
        {
          label: "缺卡",
          value: -1,
        },
        {
          label: "外勤",
          value: 7,
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    search() {
      this.req.page = 1;
      this.getList();
    },
    // 获取列表
    getList() {
      getCheckRecord(this.req).then((res) => {
        this.list = res.data || [];
        this.total = res.total;
      });
    },
    edit(row) {
      this.current = JSON.parse(JSON.stringify(row));
      this.show = true;
    },
    getResult(r, type) {
      const result = {
        '-1': "缺卡",
        0: "待打卡",
        1: "正常打卡",
        2: type == "shangban" ? "迟到打卡" : "早退打卡",
        3: "非工作日打卡",
        4: "请假",
        7: "外勤",
      };
      return result[r] || "--";
    },
    downloadTemp() {
      if (this.req.day) {
        this.req.gmtCreate_ = this.req.day;
      }
      this.download("/workbench/attend-record/export", this.req, 'get');
    },
    onConfirm() {
      this.show = false;
      this.search();
    },
    minutesToHours(minutes) {
        if(!minutes) return 0;
        var hours = minutes / 60;
        return hours.toFixed(2); // 保留两位小数
    }
  },
};
</script>

<style lang="scss" scoped></style>
